<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    .light
    {
        background-color:white;
        color:black;
        width: 100%;
        height: 100%;
    }
    .dark
    {
        background-color:black;
        color:white;
        width: 100%;
        height: 100%;
    }
    div,body
    {
        width: 100%;
        height: 100%;
    }
</style>
</head>
<body>
    <!-- 类名样式操作 -->
    <div class="light" onclick = "change()">
        这是一段话<br>
        这是一段话<br>
        这是一段话<br>
    </div>
</body>
<script>
    function change()
    {
        let ele = document.querySelector("div");
        if(ele.className == "light")
        {
            ele.className = "dark";
        }
        else
            ele.className = "light";
    }
</script>
</html>